<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style type="text/css">
        .login-form{
            width: 450px;
            height: 715px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            box-shadow: 0 0 25px #909399;
            margin: 70px auto;
            padding: 20px 35px 15px 35px;
        }
        .login-title{
            text-align: center;
            margin: 0 auto 10px auto;
            color: #303133;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
        body{
            background-image: url("/img/login.jpeg");
            background-repeat: no-repeat;
            background-size: 100%;
        }
    </style>

</head>
<body>
<div id="div">
    <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="login-form">
        <h3 class="login-title">注册账号</h3>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" @blur="checkAcount" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="userForm.checkPass"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userForm.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="userForm.age"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
            <el-input v-model="userForm.phone" ></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="userForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="用户头像" prop="photoUrl">
            <el-upload
                    class="avatar-uploader"
                    action="/user/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="url" :src="url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('userForm')">保存</el-button>
            <el-button @click="toLogin()">返回</el-button>
        </el-form-item>
    </el-form>
</div>
</body>

<script type="application/javascript">
    new Vue({
        el:'#div',
        data: {
            userForm: {},
            rules: {
                account: [
                    { required: true, message: '账号名不能为空', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }//required:是否必填，trigger:触发方式
                ],
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                birthdayId: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' }
                ]
            },
            msg:"",
            url:"",
        },
        mounted(){

        },
        methods: {
            checkAcount(){
                axios.post('/user/checkAcount?username='+this.userForm.username).then(res => {
                    var flag = res.data;
                    if(!flag){
                        this.$message.error("用户名已存在");
                        this.user.username = '';
                    }
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var user = JSON.stringify(this.userForm);
                        axios.post("/user/userRegister","user="+user).then(res=>{
                            if(res){
                                location.href="/tologin";
                            }else{
                                this.$message({
                                    showClose: true,
                                    message: '注册失败',
                                    type: 'error'
                                });
                            }
                        });
                    }
                });
            },
            toLogin() {
                location.href="/tologin";
            },
            //上传成功
            handleAvatarSuccess(res,file,fileList) {
                this.url= "upload/images/"+file.name;
                this.userForm.photoUrl = this.url;
            },
            //上传前准备
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/webp';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    });
</script>
</html>
